<template>
	<view class="index" v-if="loadStatus">

		<view class="top bg-theme flex align-center text-xl">

			<view class="flex-twice">
				<text class="text-sm margin-right-xs">收入</text>
				<text class="text-price text-green text-bold">{{numberFormatter(count.in_amount)}}</text>
			</view>
			<view class="flex-twice">
				<text class="text-sm margin-right-xs">支出</text>
				<text class="text-price text-red text-bold">{{numberFormatter(count.out_amount)}}</text>
			</view>
			<view class="text-center search-text text-df" @tap="showSearch = true">
				<u-icon name="search" size="28" color="#000"></u-icon>
			</view>
		</view>

		<!-- 搜索开始 -->
		<u-popup :show="showSearch" @close="showSearch = false" mode="right">
			<Search @search="search" @init="init" />
		</u-popup>
		<!-- 搜索结束 -->

		<!-- 记录开始 -->
		<scroll-view class="container" scroll-y="true" @scroll="scroll">
			<!-- 虚拟列表总高度 -->
			<view :style="{'height': `${totalHeight}rpx`, 'position': 'relative'}" class="list">
				<!-- 可视渲染区 -->
				<view :style="{'top': `${top}px`}" class="show-view">
					<!--在这里自定义你数据的展示结构和样式,itemHeight为这里的总高度-->
					<view v-for="(item, index) in dateList" :key="index">
						<view class="date-box item" v-if="item.in_amount || item.out_amount">
							<view class="tag"></view>
							<view class="date">{{item.date}}</view>
							<view class="count">
								<view class="in margin-right-xs">收入：<text
										class="text-green text-bold">+{{numberFormatter(item.in_amount.toFixed(2))}}</text>
								</view>
								<view class="in">支出：<text
										class="text-red text-bold">-{{numberFormatter(item.out_amount.toFixed(2))}}</text>
								</view>
							</view>
						</view>
						<navigator :url="'/pages/index/detail?id='+item.id" class="list-item item" v-else>
							<view class="icon">
								<image :src="item.icon_image" mode=""></image>
							</view>
							<view class="info">

								<view class="type-name text-df flex align-center">{{item.type_name}}
									{{item.remark ? '-' : ''}} {{item.remark}}
								</view>
								<view class="account-name"><text
										v-if="item.user_remark">【{{item.user_remark}}】</text>{{item.account_name}}
								</view>
							</view>
							<view class="amount text-bold"
								:class="item.operation_type == 1 ? 'text-red' : 'text-green'">
								{{item.operation_type == 1 ? '-' : '+'}}{{numberFormatter(item.amount)}}
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</scroll-view>


		<!-- <u-empty v-else text="你还没有记帐记录"></u-empty> -->
		<!-- 记录结束 -->

		<navigator url="/pages/index/add" class="add">
			<image src="/static/tabbar/add.png" mode=""></image>
		</navigator>

	</view>
</template>

<script>
	var that;
	import {
		mapState
	} from 'vuex';

	import FundsModel from '@/models/FundsModel.js'
	import IndexModel from '@/models/IndexModel.js'

	import Search from '@/components/search.vue'
	export default {
		components: {
			Search
		},
		computed: {
			...mapState(['token', 'userInfo', 'users', 'accounts', 'fundTypes']),
			totalHeight() {
				return this.rows.length * this.itemHeight * 2 //因为rpx和px的关系
			}
		},
		data() {
			return {
				loadStatus: false,
				showSearch: false,
				count: {
					in_amount: 0,
					out_amount: 0
				},
				page: 1,
				dateList: [],
				form: {},
				rows: [],
				itemHeight: 50, //每条数据所占高度
				showNum: 30, //可视区域显示的最大条数
				top: 0, //偏移量
				scrollTop: 0, //卷起的高度
				startIndex: 0, //可视区域第一条数据的索引
				endIndex: 0, //可视区域最后一条数据的索引+1，
			}

		},
		async onLoad() {
			that = this;
			uni.showLoading({
				mask: true
			});
			if (that.token) {
				await this.init();
				this.loadStatus = true
				uni.hideLoading()
			}
			that.getNotice();

		},
		onPullDownRefresh() {
			that.init();
		},
		onReachBottom() {
			// const start = this.page * 50
			// const end = start + 50
			// this.dateList = this.dateList.concat(this.rows.slice(start, end))
			// this.page++
		},
		onShareAppMessage() {
			return {
				path: '/pages/index/index',
				title: '记帐好习惯,我的记帐本！',
				imageUrl: '/static/poster.png'
			}
		},
		methods: {
			async init(form = {}) {
				this.form = form
				that.showSearch = false;
				that.dateList = [];
				await that.getList();
				this.top =  0
				this.scrollTop = 0
				this.startIndex = 0
				this.endIndex = 0
				this.scroll()
				this.getCount()
			},

			async search(form = {}) {
				this.init(form)
			},
			//获取列表
			async getList() {
				const res = await FundsModel.index(this.form)
				this.rows = res.data
				this.dateList = res.data.slice(0, 10)
			},
			//获取列表
			async getCount() {
				const res = await FundsModel.count(this.form)
				this.count = res.data
			},
			getNotice() {
				IndexModel.notice().then(res => {
					if (res.code == 200 && res.data) {
						var noticeId = uni.getStorageSync('noticeId');
						uni.setStorageSync('noticeId', res.data.id);
						if (noticeId != res.data.id) {
							uni.showModal({
								title: res.data.title,
								content: res.data.content
							})
						}
					}
				})
			},
			//虚拟列表
			getShowList() {
				//可视区域能出现的数据条数
				// this.showNum = Math.ceil(this.contentHeight / this.itemHeight);
				// console.log('可视数量',this.showNum)

				//可视区域第一条数据的索引
				this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
				// console.log('初始索引',this.startIndex)

				//可视区域最后一条数据的下一条数据
				this.endIndex = this.startIndex + this.showNum;

				//可视区数据，会比实际可视多渲染一条		
				this.dateList = this.rows.slice(this.startIndex, this.endIndex)
				// console.log(this.showList)

				//保证滑动时第一条数据完整展示
				let offsetY = this.scrollTop - (this.scrollTop % this.itemHeight);

				this.top = offsetY;
			},
			scroll() {
				// 利用uniapp提供的接口获取可视区域的高度和滚动高度
				let query = uni.createSelectorQuery()
				let container = query.select('.container');
				container.fields({
					// rect:true,   //是否返回节点布局位置信息{left,top,right,bottom}
					size: true, //是否返回节点尺寸信息{width，height}
					scrollOffset: true //是否返回节点滚动信息{scrollLeft,scrollTop}
				}, (res) => {
					console.log(res)
					if(res) {
						this.scrollTop = res.scrollTop
						this.contentHeight = res.height
						this.getShowList(); //因为所在函数是异步
					}
				
				}).exec()
			},
		},
		watch: {
			async token() {
				this.$base.init()
				await this.init();
				this.loadStatus = true
				uni.hideLoading()
			}
		}
	}
</script>

<style scoped lang="less">
	.index {
		padding-top: 60upx;
	}

	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 5;
		padding: 8upx 0 15upx;
		height: 60rpx;
		box-sizing: border-box;

		>view {
			display: flex;
			justify-content: center;
			align-items: center;
			border-right: 1upx solid #fff;
		}

		.search-text {
			width: 100upx;
			border: none;
		}


	}

	.mask {
		z-index: 11;

		.search {
			background: #FFFFFF;
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
			width: 600upx;

			.container {
				padding: 0 20upx;
				font-size: 28upx;

				.item {
					border-bottom: 1upx solid #eee;
					padding: 30upx 0;

					.title {
						font-weight: 600;
						width: 120rpx;
					}
				}

				.padding {
					padding: 0 20rpx;
					color: black;
				}

			}



			.footer {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;

				.cu-btn {
					height: 80upx;
				}
			}
		}
	}


	.container {
		box-sizing: border-box;
		width: 750upx;
		height: calc(100vh - 30px);
		box-sizing: border-box;
		overflow-y: scroll;



		.show-view {
			border-left: 1upx dashed #EDEDED;
			left: 30rpx;
			width: 720rpx;
			box-sizing: border-box;
			position: absolute;
		}


		.item {
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.date-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			border-bottom: 1upx solid #EDEDED;
			box-sizing: border-box;
			font-size: 24upx;
			padding-left: 30rpx;

			.tag {
				width: 40upx;
				height: 40upx;
				border: 6upx solid #FFD801;
				border-radius: 50%;
				position: absolute;
				left: -20upx;
				box-sizing: border-box;
				background: #fff;
			}

			.count {
				display: flex;
			}
		}

		.list-item {
			display: flex;
			align-items: center;
			border-bottom: 1upx dashed #EDEDED;
			flex: 1;
			box-sizing: border-box;

			.icon {
				margin-right: 20upx;
				border-radius: 50%;
				padding: 10upx;

				image {
					width: 60upx;
					height: 60upx;

				}
			}

			.info {
				flex: 1;
			}

			.account-name {
				color: #ccc;
				font-size: 24upx;
				flex: 1;
			}

			.amount {
				width: 200upx;
				text-align: right;
				font-size: 32upx;
			}
		}

	}




	.add {
		position: fixed;
		right: 20upx;
		bottom: 40upx;
		background: #fff;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		z-index: 9;

		image {
			width: 80upx;
			height: 80upx;
		}
	}
</style>